<template>
	<view class="content">
		<button type="default" @click="add()">添加新闻</button>
		<table>
			<tr>
				<td>新闻id</td>
				<td>新闻标题</td>
				<td>新闻内容</td>
				<td>新闻分类</td>
				<td>操作</td>
			</tr>
			<tr v-for="v in News">
				<td>{{v.ID}}</td>
				<td>{{v.Title}}</td>
				<td>{{v.Data}}</td>
				<td>{{types[v.TypeId].Data}}</td>
				<td>
					<table>
					<tr>
						<td><button type="default" @click="update(v.ID)">修改</button></td>
						<td><button type="default" @click="del(v.ID)">删除</button></td>
					</tr>
				</table>
				</td>
			</tr>
		</table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				News:[],
				types:[],
			}
		},
		onLoad() {
			this.list()
		},
		methods: {
			list(){
				uni.request({
				    url: 'http://127.0.0.1:8080/list', //仅为示例，并非真实接口地址。
				    data: {
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
						this.News = res.data.Data
				    }
				});
				uni.request({
				    url: 'http://127.0.0.1:8080/type/list', //仅为示例，并非真实接口地址。
				    data: {
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
						this.types = res.data.Data
				    }
				});
			},
			del(ID){
				uni.request({
				    url: 'http://127.0.0.1:8080/del', //仅为示例，并非真实接口地址。
					method:"POST",
				    data: {
						id:ID,
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
						this.list()
				    }
				});
			},
			add(){
				uni.reLaunch({
					url: '/pages/html/add/add'
				});
			},
			update(id){
				uni.reLaunch({
					url: '/pages/html/update/update?id='+id
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
